<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Droppable Demo</title>
<link rel="stylesheet" href="../themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script src="../jquery-1.2.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../jquery.dimensions.js"></script>
<script type="text/javascript" src="../ui.mouse.js"></script>
<script type="text/javascript" src="../ui.draggable.js"></script>
<script type="text/javascript" src="../ui.draggable.ext.js"></script>
<script type="text/javascript" src="../ui.droppable.js"></script>
<script type="text/javascript" src="../ui.droppable.ext.js"></script>
<style type="text/css" media="all">

li {
	position: relative;
	border-bottom: 1px solid #999;
	border-right: 1px solid #999;
	margin: 10px;
	padding: 10px;
	height: 220px;
	list-style-type: none;
	font-size: 10pt;
	background: #fff;
}

.draggable {
	width: 80px;
	height: 35px;
	background-color: #68BFEF;
	border: 2px solid #0090DF;
	padding: 5px;	
	text-align: center;
	margin: 10px;
	cursor: pointer;
	z-index: 100;
}

.draggable.little {
	width: 80px;
	height: 30px;
}

.draggable.big {
	width: 120px;
	height: 60px;
}

.draggable.green {
	background-color: #73d216;
	border-color: #4e9a06;
}

.draggable.red {
	background-color: #ef2929;
	border-color: #cc0000;
}

.draggable.orange {
	background-color: #fcaf3e;
	border-color: #f57900;
}

.draggable.purple {
	background-color: #ad7fa8;
	border-color: #75507b;
}

.draggable.gray {
	background-color: silver;
	border-color: gray;
}

.droppable {
	float: right;
	width: 200px;
	height: 200px;
	background-color: #e9b96e;
	border: 3px double #c17d11;
	padding: 5px;
	text-align: center;
	overflow: auto;
	opacity: 0.7;
}

.droppable.nested {
	width: 120px;
	height: 80px;
	margin-top:20px;
	margin-right:30px;
	background-color: #f9c97e;
	border: 3px double #c17d11;
}

.droppable-active {
	opacity: 1.0;
}

.droppable-hover {
	outline: 1px dotted black;
}

.silver {
	background-color: #fafafa;
	border-color: silver;
}

</style>
</head>
<body>

	<ul>

	<li>
		<div id="droppable-accept-function" class="droppable">droppable<br/></div>
accept: function(draggable) {<br/>
&nbsp;&nbsp;return $(draggable).is('.green');<br/>
}
		<div class="draggable red">
			draggable
			<div class="className">.red</div>
		</div>
		<div class="draggable green">
			draggable
			<div class="className">.green</div>
		</div>
	</li>
	<li>
		<div id="droppable-accept-string-little" class="droppable">droppable<br/></div>
		accept: '.little'
		<div class="draggable little">
			draggable
			<div class="className">.little</div>
		</div>
		<div class="draggable big">
			draggable
			<div class="className">.big</div>
		</div>
	</li>
	<li>
		<div id="droppable-activeClass" class="droppable">droppable<br/></div>
		activeClass: 'silver'
		<div class="draggable activeClass gray">
			draggable
			<div class="className">.gray</div>
		</div>
	</li>
	<li>
		<div id="droppable-greedy-false" class="droppable">droppable<br/>
			<div id="droppable-greedy-false-nested" class="droppable nested">droppable<br/></div>
		</div>
		greedy: false
		<div class="draggable orange">
			draggable
			<div class="className">.orange</div>
		</div>
	</li>
	<li>
		<div id="droppable-greedy-true" class="droppable">droppable<br/>
			<div id="droppable-greedy-true-nested" class="droppable nested">droppable<br/></div>
		</div>
		greedy: true
		<div class="draggable purple">
			draggable
			<div class="className">.purple</div>
		</div>
	</li>
	<li>
		<div id="droppable-hoverClass" class="droppable">droppable<br/></div>
		hoverClass: 'silver'
		<div class="draggable hoverClass gray">
			draggable
			<div class="className">.gray</div>
		</div>
	</li>
	<li>
		<div id="droppable-tolerance-fit" class="droppable">droppable<br/>fit<br/></div>
		tolerance: 'fit'<br/>
		//100% inside droppable
		<div class="draggable tolerance-fit">
			draggable
		</div>
	</li>
	<li>
		<div id="droppable-tolerance-intersect" class="droppable">droppable<br/>intersect<br/></div>
		tolerance: 'intersect'<br/>
		//at least 50% inside droppable
		<div class="draggable tolerance-intersect">
			draggable
		</div>
	</li>
	<li>
		<div id="droppable-tolerance-pointer" class="droppable">droppable<br/>pointer<br/></div>
		tolerance: 'pointer'<br/>
		//mouse pointer inside droppable
		<div id="draggable-tolerance-pointer-center" class="tolerance-pointer">
			draggable
		</div>
		<div id="draggable-tolerance-pointer-outside" class="tolerance-pointer">
			draggable
		</div>
	</li>
	<li>
		<div id="droppable-tolerance-touch" class="droppable">droppable<br/>touch<br/></div>
		tolerance: 'touch'<br/>
		//any amount inside droppable
		<div class="draggable tolerance-touch">
			draggable
		</div>
	</li>

	</ul>

<script type="text/javascript">

$(document).ready(function(){

	$('.draggable').draggable({
		helper: 'clone'
	});

	$('#droppable-accept-function')
		.droppable({
			accept: function(draggable) {
				return $(draggable).is('.green');
			},
			activeClass: 'droppable-active',
			hoverClass: 'droppable-hover',
			drop: function(ev, ui) {
				$(this).append($(document.createElement('div')).text($(ui.draggable.element).text()));
			}
		});

	$('#droppable-accept-string-little')
		.droppable({
			accept: '.little',
			activeClass: 'droppable-active',
			hoverClass: 'droppable-hover',
			drop: function(ev, ui) {
				$(this).append($(document.createElement('div')).text($(ui.draggable.element).text()));
			}
		});

	$('#droppable-activeClass').addClass('droppable-active')
		.droppable({
			accept: '.gray.activeClass',
			activeClass: 'silver',
			drop: function(ev, ui) {
				$(this).append($(document.createElement('div')).text($(ui.draggable.element).text()));
			}
		});

	$('#droppable-greedy-false')
		.droppable({
			accept: '.orange',
			activeClass: 'droppable-active',
			hoverClass: 'droppable-hover',
			greedy: false,
			drop: function(ev, ui) {
				$(this).append($(document.createElement('div')).text($(ui.draggable.element).text()));
			}
		});

	$('#droppable-greedy-false-nested')
		.droppable({
			accept: '.orange',
			activeClass: 'droppable-active',
			hoverClass: 'droppable-hover',
			greedy: false,
			drop: function(ev, ui) {
				$(this).append($(document.createElement('div')).text($(ui.draggable.element).text()));
			}
		});

	$('#droppable-greedy-true')
		.droppable({
			accept: '.purple',
			activeClass: 'droppable-active',
			hoverClass: 'droppable-hover',
			greedy: true,
			drop: function(ev, ui) {
				$(this).append($(document.createElement('div')).text($(ui.draggable.element).text()));
			}
		});

	$('#droppable-greedy-true-nested')
		.droppable({
			accept: '.purple',
			activeClass: 'droppable-active',
			hoverClass: 'droppable-hover',
			greedy: true,
			drop: function(ev, ui) {
				$(this).append($(document.createElement('div')).text($(ui.draggable.element).text()));
			}
		});

	$('#droppable-hoverClass').addClass('droppable-active')
		.droppable({
			accept: '.gray.hoverClass',
			hoverClass: 'silver',
			drop: function(ev, ui) {
				$(this).append($(document.createElement('div')).text($(ui.draggable.element).text()));
			}
		});

	$('#droppable-tolerance-fit').addClass('droppable-active')
		.droppable({
			accept: '.tolerance-fit',
			hoverClass: 'silver',
			tolerance: 'fit',
			drop: function(ev, ui) {
				$(this).append($(document.createElement('div')).text($(ui.draggable.element).text()));
			}
		});

	$('#droppable-tolerance-intersect').addClass('droppable-active')
		.droppable({
			accept: '.tolerance-intersect',
			hoverClass: 'silver',
			tolerance: 'intersect',
			drop: function(ev, ui) {
				$(this).append($(document.createElement('div')).text($(ui.draggable.element).text()));
			}
		});

	$('#draggable-tolerance-pointer-center').addClass('draggable')
		.draggable({
			cursorAt: {top:15, left:50},
			helper: 'clone'
		});

	$('#draggable-tolerance-pointer-outside').addClass('draggable')
		.draggable({
			cursorAt: {top:-10, left:-10},
			helper: 'clone'
		});

	$('#droppable-tolerance-pointer').addClass('droppable-active')
		.droppable({
			accept: '.tolerance-pointer',
			hoverClass: 'silver',
			tolerance: 'pointer',
			drop: function(ev, ui) {
				$(this).append($(document.createElement('div')).text($(ui.draggable.element).text()));
			}
		});

	$('#droppable-tolerance-touch').addClass('droppable-active')
		.droppable({
			accept: '.tolerance-touch',
			hoverClass: 'silver',
			tolerance: 'touch',
			drop: function(ev, ui) {
				$(this).append($(document.createElement('div')).text($(ui.draggable.element).text()));
			}
		});

	$('#droppable-activate')
		.droppable({
			accept: '.activate',
			activeClass: 'droppable-active',
			activate: function(ev, ui) {
				$(this).append($(document.createElement('div')).text('activate'));
			}
		});

	$('#droppable-deactivate')
		.droppable({
			accept: '.deactivate',
			activeClass: 'droppable-active',
			deactivate: function(ev, ui) {
				$(this).append($(document.createElement('div')).text('deactivate'));
			}
		});

	$('#droppable-over')
		.droppable({
			accept: '.over',
			activeClass: 'droppable-active',
			over: function(ev, ui) {
				$(this).append($(document.createElement('div')).text('over'));
			}
		});

	$('#droppable-out')
		.droppable({
			accept: '.out',
			activeClass: 'droppable-active',
			out: function(ev, ui) {
				$(this).append($(document.createElement('div')).text('out'));
			}
		});

	$('#droppable-tenfour')
		.droppable({
			accept: '.tenfour',
			activeClass: 'droppable-active',
			over: function(ev, ui) {
				$(this).append($(document.createElement('div')).text('over'));
			},
			out: function(ev, ui) {
				$(this).append($(document.createElement('div')).text('out'));
			}
		});

	$('#droppable-drop')
		.droppable({
			accept: '.drop',
			activeClass: 'droppable-active',
			drop: function(ev, ui) {
				$(this).append($(document.createElement('div')).text('drop'));
			}
		});

});
</script>
</body>
</html>

